<template>
    <div>
        <div class="module-box">
            <p class="title" @click="test">基本组件</p>
            <div class="node-box">
                <startNode @mousedown="addGraphNode('startNode',$event)" class="dnd-node"></startNode>
                <endNode @mousedown="addGraphNode('endNode',$event)" class="dnd-node"></endNode>
                <processNode @mousedown="addGraphNode('processNode',$event)" class="dnd-node"></processNode>
                <conditionNode @mousedown="addGraphNode('conditionNode',$event)" class="dnd-node"></conditionNode>
                <childProcessNode @mousedown="addGraphNode('childProcessNode',$event)" class="dnd-node"></childProcessNode>
            </div>
        </div>
        <!-- loading -->
        <a-spin :spinning="flowSpin" style="display: block;">
            <!-- 后端接口数据展示 -->
            <div class="module-box" v-for="module in extendFlow" :key="module.name">
                <p class="title">{{module.name}}</p>
                <a-tabs type="card">
                    <a-tab-pane :tab="item.tabs" v-for="item in module.content" :key="item.tabs">
                        <div class="cmpt-node-box" v-for="cmpt in item.content" :key="cmpt.key">
                            <cmptProcessNode
                                v-show="!item.isHidden"
                                :info="cmpt"
                                @mousedown="addCmptGraphNode('cmptProcessNode',cmpt,$event)"
                            ></cmptProcessNode>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-spin>

    </div>
</template>
<script>
import '@antv/x6-vue-shape'
import { Graph, Addon } from '@antv/x6'
import { nodeTypeConfig, nodeInfo } from '../config/dnd.js'
import { ref } from '@vue/reactivity'
import processNode from '../vueFlow/process/index.vue'
import startNode from '../vueFlow/start/index.vue'
import endNode from '../vueFlow/end/index.vue'
import conditionNode from '../vueFlow/condition/index.vue'
import childProcessNode from '../vueFlow/childProcess/index.vue'
import cmptProcessNode from '../vueFlow/cmptProcess/index.vue'
import { notification } from 'ant-design-vue'
import {
    getFlowList
} from '@/request/api/mock.js'
import { inject } from '@vue/runtime-core'
export default {
    components: {
        processNode,
        startNode,
        endNode,
        conditionNode,
        childProcessNode,
        cmptProcessNode
    },
    setup () {
        const editor = inject('editor')
        const cmptCellInfo = inject('cmptCellInfo')
        // 初始化
        const init = () => {
            createDnd()
            registerV3Comp()
            getFlowModuleList()
        }
        // 创建dnd
        const createDnd = () => {
            editor.dnd = new Addon.Dnd({
                target: editor.graph,
                getDragNode: (node) => node.clone({ keepId: true })
            })
        }
        // 创建vue3组件
        const registerV3Comp = () => {
            const nodeCmpt = {
                startNode: startNode,
                processNode: processNode,
                endNode: endNode,
                conditionNode: conditionNode,
                childProcessNode: childProcessNode,
                cmptProcessNode: cmptProcessNode
            }
            for (const item in nodeInfo) {
                if (item === 'cmptProcessNode') {
                    Graph.registerVueComponent(`${item}`, {
                        template: `<${item} :info="info"></${item}>`,
                        data () {
                            return {
                                info: cmptCellInfo.data
                            }
                        },
                        components: {
                            [item]: nodeCmpt[item]
                        }
                    }, true)
                } else {
                    Graph.registerVueComponent(`${item}`, {
                        template: `<${item}></${item}>`,
                        components: {
                            [item]: nodeCmpt[item]
                        }
                    }, true)
                }
            }
        }
        // 判断是否是唯一节点
        const onJudgeOnlyOneNode = (type) => {
            const node = ['startNode', 'endNode']
            if (!~node.indexOf(type)) {
                return false
            }
            const result = editor.graph.getNodes().some((cell) => {
                return cell.component === type
            })
            return result
        }
        // 点击菜单新增画布结点
        const addGraphNode = (type, e) => {
            if (onJudgeOnlyOneNode(type)) {
                notification.warning({
                    message: '提示',
                    description: '当前节点为唯一节点'
                })
                return
            }
            const node = editor.graph.createNode(nodeTypeConfig(type))
            editor.dnd.start(node, e)
        }
        // 点击菜单新增画布结点 接口节点
        const addCmptGraphNode = (type, info, e) => {
            console.log(editor)
            cmptCellInfo.data = info
            const node = editor.graph.createNode({
                ...nodeTypeConfig(type),
                ...{
                    data: info,
                    width: 200
                }
            })
            editor.dnd.start(node, e)
        }

        // flow loading
        const flowSpin = ref(true)
        const extendFlow = ref([])
        // 获取后端下发的进程组件
        const getFlowModuleList = async () => {
            const result = await getFlowList()
            flowSpin.value = false
            if (result.success) {
                extendFlow.value = result.data
            }
        }

        const test = () => {
            console.log(editor)
        }

        return {
            init,
            addGraphNode,
            addCmptGraphNode,
            flowSpin,
            extendFlow,
            test
        }
    }
}
</script>
<style lang="less" scoped>
.dnd-node{
    width: 80px;
    height: 50px !important;
    display: inline-block;
    margin: 0 10px 10px 10px;
    cursor: grab;
}
.module-box{
    .title{
        height: 30px;
        line-height: 30px;
        background: gray;
        color: white;
        padding-left: 20px;
        margin-bottom: 15px;
    }
}
.cmpt-node-box{
    width: 160px;
    height: 50px;
    margin: 10px auto 0;
    cursor: grab;
}
/deep/ .ant-tabs-content{
    height: 200px;
    overflow: auto;
}
</style>
